<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%><%@ taglib prefix="s" uri="/struts-tags"  %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	/* 버튼에 이벤트 */
	$('#submitbtn').on('click', insert);
	init();
});

function init(){
		$.ajax({
			url: 'checklist.action', 
			type: 'POST', 
			dataType: 'json', 
			success:output
		});
}

function output(msg) {
	
	/* 영역 초기화 */
	$('#checklist').html('');
	var num =0;
	var str = '<table>';
	$.each(msg.listcheck, function(key, item){
		num = item.num+0;
		str += '<tr><td width=50px>'+eval(key+1)+'.';
		str += '</td><td width=230px>'+item.content;
		str += "</td><td><a href='javascript:delconfirm("+num+")'>X</a>";
		
		str += '</td></tr>';
	});
	
	str+='</table>';
	
	/* 영역에 리스트 담은 str 문자열 붙힌다. */
	$('#checklist').html(str);
}

function insert(){
	var content = $('#content').val();
	
	$.ajax({
		url: 'insertchecklist.action', 
		type: 'POST',
		data:{content:content},
		dataType: 'json', 
		success:insertOK
	});
}

function insertOK(msg){
	alert('일정 추가 성공');
	output(msg);
}

function delconfirm(num){
	if(confirm("할일을 삭제하시겠습니까?")){

		$.ajax({
			url: 'delchecklist.action', 
			type: 'POST',
			data:{num:num},
			dataType: 'json', 
			success:deleteOK
		});
	} 
	return;
}

function deleteOK(msg){
	alert('일정 삭제 성공');
	output(msg);
}

</script>
</head>
<body>
<h2>[ 할일 ]</h2>
<input type="text" name="content" id="content" size="40" placeholder="매일 매일 즐거운 시험 ^_^"><input type="button" id="submitbtn" value="새 할일 등록"><br><br><br>
<div id="checklist"></div>
</body>
</html>